var  imgw ,imgh ;
jQuery(window).load(function(){
    imgw = jQuery('#bigimg')[0].width;
    imgh = jQuery('#bigimg')[0].height;
    var api = $.Jcrop('#bigimg',{
        setSelect: [ 0, 0, 60, 60]
    });
    api.setSelect( [ 0, 0, 60, 60] );
    jQuery('#bigimg').Jcrop({
        onChange: showPreview,
        onSelect: showPreview,
        aspectRatio: 1
    });
});

// Our simple event handler, called from onChange and onSelect
// event handlers, as per the Jcrop invocation above
function showPreview(coords)
{
    var imgpos = [coords.x,coords.y,coords.w];
    var inputD = imgpos.join("_");
    jQuery('#imgpos')[0].setAttribute("value", inputD);
    if (parseInt(coords.w) > 0)
    {
        var rx =  60 / coords.w;
        var ry =  60 / coords.h;
        jQuery('#preview').css({
            width: Math.round(rx * parseInt(imgw)) + 'px',
            height: Math.round(ry * parseInt(imgh)) + 'px',
            marginLeft: '-' + Math.round(rx * coords.x) + 'px',
            marginTop: '-' + Math.round(ry * coords.y) + 'px'
        });
    }
}